<template>
	<view class="container">
		<bw-swiper :swiperList="dataObj.swiperList" :w_h="1" :swiperType="true" :autoplay="false" style="width:100%"
			@change="swiperChang"></bw-swiper>

		<view class="container-cont">
			<view class="content">我的邀请码：35SFA2</view>
			<view class="content">
				<view class="title">邀请说明：</view>
				<view class="info">1、分享海报中的二维码已包含您的邀请信息</view>
				<view class="info">2、好友通过您分享的海报进入小程序之后Ta将永久成为您的下级</view>
			</view>
			<view class="btn_box">
				<view class="share-btn" @click="onCreateShare">分享</view>
			</view>
		</view>
	</view>

	<canvas v-show="dataObj.canvasFlag" style="width: 540px; height: 1040px;border: 1px solid red;" id="canvasID"
		canvas-id="canvasID"></canvas>
</template>

<script setup>
	import {
		onLoad,
		onShareAppMessage,
		onAddToFavorites
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		inject,
		nextTick
	} from 'vue'
	// import url from '../../util/http.js';
	// import req from '../../util/request.js'
	import bwSwiper from '@/wxcomponents/bw-swiper/bw-swiper.vue'

	let dataObj = reactive({
		current: 0, // 当前轮播图
		swiperList: [{
			img: '../../static/image/2.png',
			text: '加油'
		}, {
			img: '../../static/image/4.jpg',
			text: '加油'
		}],
		newImgUrl: '',
		qrcodeUrl: '../../static/image/3.png', // 二维码
		canvasFlag: false
	})

	const popup = ref()

	onLoad(() => {
		// getQrcode()
	})


	// 监听轮播图
	const swiperChang = (e) => dataObj.current = e.detail.current

	// 获取邀请码
	// const getQrcode = async () => {
	// 	let res = await req.post(url.getQrcode)
	// 	if (res) dataObj.qrcodeUrl = res
	// 	// console.log('res', res);
	// 	// this.qrcodeImg = res
	// }

	// 
	const onCreateShare = () => {
		dataObj.canvasFlag = true
		uni.showLoading({
			title: '海报生成中...'
		});
		setTimeout(() => {
			let url = dataObj.swiperList[dataObj.current].img
			console.log('url',url);
			init(url)
		}, 1500)
	}

	let ctx = uni.createCanvasContext('canvasID');
	const init = (imgUrl) => {
		// 下载网络图片
		// uni.getImageInfo({
		// 	src: dataObj.qrcodeUrl,
			// success: function(res) {
				// 绘制背景
				ctx.drawImage(imgUrl, 0, 0, 540, 1040)
				// 绘制二维码
				ctx.drawImage(dataObj.qrcodeUrl, 388, 886, 120, 120)
				// 画到canvas
				ctx.draw(true, (e) => {
					// 将canvas生成图片
					uni.canvasToTempFilePath({ 
						canvasId: 'canvasID',
						quality: 1,
						success: (res) => { // 在H5平台下，tempFilePath 为 base64
							if (res.tempFilePath) {
								uni.hideLoading();
								dataObj.canvasFlag = false
								// 图片分享-收藏-下载
								wx.showShareImageMenu({
									path: res.tempFilePath,
									success: (e) => {}
								})
							}
						},
						fail: (err) => console.log('err', err)
					})
				})
			// }
		// });
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: rgb(241, 241, 241);

		.container-cont {
			margin: 26rpx 30rpx 30rpx 30rpx;
			font-size: 28rpx;

			.content {
				margin-bottom: 20rpx;
				padding: 26rpx;
				font-size: 32rpx;
				border-radius: 10rpx;
				background-color: #fff;

				&:nth-child(1) {
					.title {
						font-size: 30rpx;
						font-weight: bold;
					}

					view {
						padding-bottom: 10rpx;

						&:last-child {
							padding-bottom: 0;
						}
					}
				}
			}

			.btn_box {
				display: flex;
				justify-content: space-between;

				.share-btn {
					width: 100%;
					border-radius: 16rpx;
					padding: 16rpx 0;
					font-size: 40rpx;
					text-align: center;
					color: #fff;
					background-color: pink;
				}
			}
		}
	}
</style>